<template>
    <div>
        <global-tables :total="total" :list="list" :loading="loading" :columns="columns" :current="search.Page" @changePage="handleChangePage">
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div></div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入标题 / 采购单号">
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="1100">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 8}">
                            <FormItem label="供货商">
                                <Button>{{formItem.SupplierName}}</Button>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 8}">
                            <FormItem label="要求到货时间">
                                <Button>{{formItem.ArriveTime}}</Button>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 8}">
                            <FormItem label="采购单号">
                                <Button>{{formItem.OrderCode}}</Button>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 8}">
                            <FormItem label="供货商联系人">
                                <Button>{{formItem.Contact}}</Button>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 8}">
                            <FormItem label="下单人">
                                <Button>{{formItem.Creator}}</Button>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 8}">
                            <FormItem label="供货商联系电话">
                                <Button>{{formItem.Mobile}}</Button>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="商品详情">
                                <Table max-height="395" :columns="projuctColumns" :data="projuctList"></Table>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button size="large" type="info" :disabled="isBtnDisabled" @click="handleSubmit('temporary')">临时保存</Button>
                <Button size="large" type="primary" @click="handleSubmit('confirm')">确认收货</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 采购入库
 */
import { cyclicRouting, getdate } from '@/util';
import { getModulePermission } from '@/api/user';
import GlobalTables from '@/components/GlobalTables';
import Api from './service';

export default {
    name: 'usersList',
    components: {
        GlobalTables
    },
    data() {
        return {
            list: [],
            itemId: 0,
            allSelectArr: null,
            loading: true,
            formItem: {},
            ruleValidate: {},
            total: 0,
            isModal: false,
            isBtnDisabled: false,
            isReceipt: false,
            ModalTitle: '确认收货',
            projuctColumns: [
                {
                    title: '商品图片',
                    render: (h, params) => {
                        const { PictureSmall } = params.row;
                        return h('div', [
                            h('Avatar', {
                                props: {
                                    src: PictureSmall,
                                    shape: 'square',
                                    size: 'large'
                                },
                                style: {
                                    margin: '5px 0'
                                }
                            })
                        ]);
                    }
                },
                {
                    title: '商品名称',
                    key: 'PName'
                },
                {
                    title: '商品规格',
                    key: 'PSName'
                },
                {
                    title: '订货数量',
                    key: 'Count'
                },
                {
                    title: '到货数量',
                    render: (h, params) => {
                        return h('div', [
                            h('InputNumber', {
                                props: {
                                    value: params.row.CountDown,
                                    max: params.row.Surplus,
                                    min: 0
                                },
                                on: {
                                    'on-change': e => {
                                        this.projuctList[params.index].CountDown = e;
                                    }
                                }
                            })
                        ]);
                    }
                },
                {
                    title: '成本',
                    key: 'Cost'
                },
                {
                    title: '小计',
                    key: 'SubTotal',
                    render: (h, params) => {
                        return h('div', [h('span', {}, params.row.Cost * params.row.CountDown)]);
                    }
                }
            ],
            projuctList: [],
            search: {
                keyword: '',
                pageindex: 1,
                pagesize: 10,
                type: 2,
                status: 2
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '标题',
                    key: 'Title'
                },
                {
                    title: '供货商名称',
                    key: 'SupplierName'
                },
                {
                    title: '采购单号',
                    width: '160px',
                    key: 'OrderCode'
                },
                {
                    title: '采购总数量',
                    key: 'TotalCount'
                },
                {
                    title: '采购总金额',
                    key: 'TotalPrice'
                },
                {
                    title: '下单人',
                    key: 'Creator'
                },
                {
                    title: '要求到货时间',
                    width: '130px',
                    render: (h, params) => {
                        return h('div', [
                            params.row.ArriveTime && h('span', {}, getdate(new Date(params.row.ArriveTime).getTime()))
                        ]);
                    }
                },
                {
                    title: '下单时间',
                    width: '120px',
                    render: (h, params) => {
                        return h('div', [
                            params.row.CreateTime && h('span', {}, getdate(new Date(params.row.CreateTime).getTime()))
                        ]);
                    }
                },
                {
                    title: '操作',
                    width: '100px',
                    align: 'center',
                    render: (h, params) => {
                        const { isReceipt } = this;
                        return h('div', [
                            isReceipt &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {},
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'receipt');
                                            }
                                        }
                                    },
                                    '确认收货'
                                )
                        ]);
                    }
                }
            ]
        };
    },
    methods: {
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 提交 */
        handleSubmit(type) {
            this.isBtnDisabled = true;
            let confirm = type === 'confirm' ? true : false;
            const { projuctList } = this;
            let data = {
                confirm,
                ID: this.itemId
            };

            data.details = projuctList
                .filter(item => {
                    return item.CountDown > 0;
                })
                .map(item => {
                    delete item.Cost;
                    delete item.Count;
                    delete item.PName;
                    delete item.PictureSmall;
                    delete item.PSName;
                    return item;
                });
            Api.setItemType(data).then(res => {
                this.isBtnDisabled = false;
                if (res.state == 'success') {
                    this.$Message.success(res.message);
                    if (confirm) {
                        this.isModal = false;
                        this.getTablesListData();
                    }
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            Api.getTablesList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.itemId = item.ID;
            if (type == 'receipt') {
                this.isModal = true;
                Api.getItemInfo({
                    id: item.ID
                }).then(res => {
                    this.formItem = res.data;
                    this.projuctList = res.data.Details;
                });
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {};
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
            /* 按钮权限请求 */
            getModulePermission({
                roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                moduleid: id
            }).then(res => {
                /* 按钮权限赋值 */
                for (let item in res.data) {
                    if (res.data[item].name == 'receipt') {
                        this.isReceipt = true;
                    }
                }
                /* 列表请求 */
                this.getTablesListData();
            });
        });
    }
};
</script>

<style>
</style>
